<template>
  <div class="tasklist">
    <div :class="{task:true, unfinished: !item.status }" v-for="(item,index) in store.tasklist" :key="index">
      <input type="checkbox" @click="change(item.id)">
      <span> {{item.name}} </span>
      <span @click="del(item.id)">删除</span>
    </div>
    
  </div>
</template>

<script setup>

//从vuex中导入useStore方法
import {useTasklistStore} from '../../stores/tasklist'

//调用useStore方法 获取store对象
var store = useTasklistStore()

var change = (id)=>{
  store.changeStatus(id);//调用vuex中的同步方法changeStatus,更改任务状态
}
var del= (id)=>{
  store.deleteTask(id);//调用vuex中的同步方法deleteTask,删除任务
}
</script>

<style scoped>
.tasklist .task{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #00C4C4;
  color: white;
  margin: 10px;
  border-radius: 30px;
}
.tasklist .task.unfinished{
  background-color: red;
}
</style>